<template>
  <div>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    window.onLoad = function () {
      var map = new AMap.Map("container", {
        zoom: 18, // 级别
        center: [113.884745, 22.991738], // 中心点坐标
        viewMode: "3D", //使用3D 视图
      });

      var trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 10,
      });
      map.add(trafficLayer);

      // 同时引入工具条插件，比例尺插件和鹰眼插件
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.MapType",
          "AMap.Geolocation",
        ],
        function () {
          // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
          map.addControl(new AMap.ToolBar());

          // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
          map.addControl(new AMap.Scale());

          // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
          map.addControl(new AMap.OverView({ isOpen: true }));

          // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
          map.addControl(new AMap.MapType());

          // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
          map.addControl(new AMap.Geolocation());
        }
      );

      var marker = new AMap.Marker({
        position: new AMap.LngLat(116, 39, 39, 9),
        offset: new AMap.Poxel(-10, -10),
        icon: "//vdata.amap.com/icons/b18/1/2.png", // 添加 Icon 图标 URL,
        title: "东莞",
      });
    };
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=	cc2542c3f3987e5019c020b964099b2d&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
};
</script>
<style lang="less" scoped>
#container {
  width: 800px;
  height: 600px;
}
</style>